import { Dialog, Grid, Toast } from "antd-mobile";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import styles from "../css/city.module.css";
import { useParams } from "react-router-dom";
import { addHistory, clearHistory } from "../../../store/slice/ticketSlice";
import { DeleteOutline } from "antd-mobile-icons";
function SearchHistory(props) {
  const list = useSelector((store) => store.ticket.searchHistory);
  const params = useParams();
  const dispatch = useDispatch();
  return (
    <div style={{ display: list.length === 0 ? "none" : "block" }}>
      <div className={styles.history}>
        <span>搜索历史</span>
        <DeleteOutline onClick={() => dispatch(clearHistory())} />
      </div>
      <Grid columns={3} gap={8}>
        {list.map((item, i) => {
          return (
            <Grid.Item key={i}>
              <div
                className={styles["grid-demo-item-block"]}
                onClick={() => {
                  dispatch(addHistory(item));
                  props.saveCity(params.type, item);
                }}
              >
                {item}
              </div>
            </Grid.Item>
          );
        })}
      </Grid>
    </div>
  );
}

export default SearchHistory;
